<template>
<div class="step-box">
    <el-steps direction="vertical" :active="1">
        <template v-for="(item, key) in process">
            <el-step :key="key" v-if="item.type == 2" icon="el-icon-s-check">
                <template v-slot:title>
                    <div class="audit-item-group">
                        <template v-if="item.result">
                            <div class="audit-item">
                                <div class="left">
                                    <span class="title">{{item.title}}</span>
                                </div>
                                <div class="time">
                                    {{item.result.create_time}}
                                </div>
                            </div>
                            <div class="audit-item" @click="toggleComment(key)">
                                <div class="left">
                                    <span class="realname" v-if="!item.result.transfer">
                                        {{item.result.auditor.realname}} ({{item.result.status_text}})
                                    </span>
                                    <span class="realname" v-else>
                                        {{item.result.transfer.from.realname}} 转交给了
                                        {{item.result.transfer.to.realname}} ({{item.result.status_text}})
                                    </span>
                                </div>
                                <div class="right" v-show="item.comment">
                                    <el-button type="primary" size="mini" @click.native.stop="showComment(key)">评论</el-button>
                                </div>
                            </div>
                            <div class="audit-content" v-if="item.result.remark">
                                {{item.result.remark}}
                            </div>
                        </template>
                        <template v-else>
                            <div class="audit-item">
                                <div class="left">
                                    <span class="title">{{item.title}}</span>
                                </div>
                            </div>
                            <div class="audit-item">
                                <div class="left">
                                    <span class="realname">{{item.content}}</span>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
                <template v-slot:description>
                    <div class="comment-group" v-if="item.comments">
                        <div class="comment-item" v-for="(comment,k) in item.comments" :key="k">
                            <div class="comment-head">
                                <div class="title">{{comment.user.realname}}在{{comment.create_time}}评论了</div>
                            </div>
                            <div class="comment-content">{{comment.remark}}</div>
                            <div v-if="comment.image.length > 0" class="order-files">
                                <el-image style="width: 100px; height: 100px" :src="comment.image[0].url" :preview-src-list="getImages(comment.image)"></el-image>
                                <p>
                                    共{{comment.image.length}}张, 点击查看预览
                                </p>
                            </div>
                        </div>
                    </div>
                </template>
            </el-step>
            <el-step :key="key" v-else :title="item.title" icon="el-icon-s-promotion" :description="item.content">
            </el-step>
        </template>
    </el-steps>
    <audit-comment ref="commentRef" @doRefresh="doRefresh"></audit-comment>
</div>
</template>

<script>
import auditComment from './audit-comment.vue';

export default {
    name: "AuditProcess",
    components: {
        auditComment
    },
    props: {
        current: {
            type: [String, Number],
            default: function () {
                return 1;
            }
        },
        process: {
            type: Array,
            default: function () {
                return [];
            }
        }
    },
    data() {
        return {
            audit_no: '',
            ruleForm: {
                flow_id: '',
                remark: '',
                image: [],
            },
            rules: {
                remark: {
                    rules: [{
                        required: true,
                        errorMessage: '请填写评论内容',
                    }]
                },
            }
        }
    },
    methods: {
        toggleComment(index) {
            let item = this.process[index];
            if (item.comment == undefined) {
                item['comment'] = true;
            } else {
                item['comment'] = !item['comment'];
            }
            this.process[index] = item;
            this.$forceUpdate()
        },
        showComment(key) {
            if (!this.process[key].result) return;
            let flow = this.process[key].result;
            this.$refs['commentRef'].showDialog(flow.id);
        },
        getImages(image) {
            return image.map(e=>e.url);
        },
        doRefresh(){
            this.$emit('doRefresh');
        }
    }
}
</script>

<style lang="less" scoped>
.audit-item-group {
    margin-left: 10px;

    .audit-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .left {
            flex: 1;

            .title {
                font-size: 14px;
                color: #333;
                font-weight: 900;
            }

            .realname {
                font-size: 13px;
                color: #666;
            }
        }

        .time {
            flex: 1;
            span-align: right;
            font-size: 13px;
            color: #c0c0c0;
        }
    }

    .audit-content {
        font-size: 13px;
        color: #666;
        background-color: #f8f8f8;
        padding: 1rem;
        margin-bottom: 12px;
    }
}

.comment-group {
    margin-left: 10px;

    .comment-item {
        background-color: #f8f8f8;
        padding: 8px;
        margin-bottom: 6px;
        border-radius: 5px;

        .comment-head {
            display: flex;
            font-size: 12px;
            margin-bottom: 5px;

            .title {
                flex: 1;
                color: #666;
            }

            .time {
                flex: 1;
                color: #666;
            }
        }

        .comment-content {
            font-size: 13px;
            color: #666;
        }

        ::v-deep .list-head {
            background-color: #f8f8f8;
        }
    }

    .comment-item:last-child {
        margin-bottom: 0;
    }
}
</style>
